<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        dl{
            overflow: hidden;
            transition: .3s;
        }
    </style>
</head>
<body>

    <ul>
        <li>
            <p>教学系统</p>
            <dl>
                <dd>学员信息</dd>
                <dd>班级信息</dd>
                <dd>开班计划</dd>
            </dl>
        </li>
        <li>
            <p>教学系统</p>
            <dl>
                <dd>学员信息</dd>
                <dd>班级信息</dd>
            </dl>
        </li>
        <li>
            <p>教学系统</p>
            <dl>
                <dd>学员信息</dd>
                <dd>班级信息</dd>
                <dd>开班计划</dd>
                <dd>开班计划</dd>
            </dl>
        </li>
    </ul>

    <script>

        // 首先不隐藏元素  dl的高度是由内容撑开的
        // 首先获取dl的高度,把高度存起来  再隐藏dl

        const oLis = document.querySelectorAll('li');
        const oDls = document.querySelectorAll('dl') ;
        for(let i = 0 ; i < oDls.length ; i++) {
            // console.log(oDls[i].offsetHeight);
            oDls[i].index = oDls[i].offsetHeight ;
            oDls[i].style.height = 0;
        }


        for(let i = 0 ; i < oLis.length ; i++) {

            oLis[i].onclick = function() {
                // console.log(i);
                // 判断dl是不是打开的
                if( this.children[1].offsetHeight === 0) {
                    this.children[1].style.height = this.children[1].index + 'px' ;
                }
                else {
                    this.children[1].style.height = 0;
                }
                
            }
        }

    </script>
    
</body>
</html>